@charset "utf-8";
/* CSS Document */

.comment {
        position:relative;
        padding:15px;
        /*margin:1em 0 3em;*/
        background:#9BC79D; /* default background for browsers without gradient support */
        color:black;
        font-size:1.2em;
        /* css3 */
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        border-radius:10px;
}
/* Variant : for top positioned triangle
------------------------------------------ */

.comment.top {
        
background:#9BC79D; /* default background for browsers without gradient support */

}
/* Variant : for left/right positioned triangle
------------------------------------------ */

.comment.left {
        margin-left:50px;
        background:#9BC79D;
}
/* Variant : for right positioned triangle
------------------------------------------ */

.comment.right {
        margin-right:50px;
        background:#9BC79D;
}
/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

/* creates triangle */
.comment:after {
        content:"";
        position:absolute;
        bottom:-15px; /* value = - border-top-width - border-bottom-width */
        left:50px; /* controls horizontal position */
        border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
        border-style:solid;
        border-color:#9BC79D transparent;
        /* reduce the damage in FF3.0 */
    display:block;
        width:0;
}
/* Variant : top
------------------------------------------ */

.comment.top:after {
        top:-15px; /* value = - border-top-width - border-bottom-width */
        right:50px; /* controls horizontal position */
        bottom:auto;
        left:auto;
        border-width:0 15px 15px; /* vary these values to change the angle of the vertex */
        border-color:#9BC79D transparent;
}
/* Variant : left
------------------------------------------ */

.comment.left:after {
        top:16px; /* controls vertical position */
        left:-50px; /* value = - border-left-width - border-right-width */
        bottom:auto;
        border-width:10px 50px 10px 0;
        border-color:transparent #9BC79D;
}
/* Variant : right
------------------------------------------ */

.comment.right:after {
        top:16px; /* controls vertical position */
        right:-50px; /* value = - border-left-width - border-right-width */
        bottom:auto;
        left:auto;
        border-width:10px 0 10px 50px;
        border-color:transparent #9BC79D;
}